<template>
  <a-upload-dragger
    name="file"
    :multiple="true"
    @change="handleChange"
    :customRequest="myuploads"
  >
    <p class="ant-upload-drag-icon">
      <a-icon type="inbox" />
    </p>
    <p class="ant-upload-text">
      单击或拖动文件到此区域上载
    </p>
    <p class="ant-upload-hint">
      支持单个或批量上传
    </p>
  </a-upload-dragger>
</template>
<script>
import SparkMD5 from "spark-md5";
import {uploade,merge,checkFlie,checkChunk} from '@/api/uploade'
var isUploaded=true;
var notUploadedChunkNumbers=[] ;//未上传的文件数组
export default {
  data() {
    return {

    };
  },
  methods: {
    myuploads(){
        console.log(11111111)
    },
    uploads(data){
        uploade(data).then(res => {
         console.log(res)
        })
        .catch(err => {
          this.$message.destroy();
            this.$message.error(err);
        })
    },
    merge(data){
        merge(data).then(res => {
         console.log(res)
        })
        .catch(err => {
          this.$message.destroy();
            this.$message.error(err);
        })
    },
    checkFlie(data){
        checkFlie(data).then(res => {
         console.log(res)
        })
        .catch(err => {
          this.$message.destroy();
            this.$message.error(err);
        })
    },
    checkChunk(data){
        checkChunk(data).then(res => {
         console.log(res)
        })
        .catch(err => {
          this.$message.destroy();
            this.$message.error(err);
        })
    },
    computeMD5(file) {
      var that = this;
      isUploaded = false; // 这个文件是否已经上传成功过
      notUploadedChunkNumbers = []; // 未成功的chunkNumber
      var fileReader = new FileReader();
      let time = new Date().getTime();
      let md5 = "";
      fileReader.readAsArrayBuffer(file.originFileObj);
      fileReader.onload = function(e) {
        if (file.originFileObj.size != e.target.result.byteLength) {
          this.$message.warning('文件读取失败');
          return false;
        }
        md5 = SparkMD5.ArrayBuffer.hash(e.target.result, false);
        // console.log(
        //   `MD5计算完毕：${file.id} ${
        //     file.name
        //   } MD5：${md5} 用时：${new Date().getTime() - time} ms`
        // );
        console.log(md5)
        file.originFileObj.uniqueIdentifier = md5;
        that.md5 = md5;

        if (md5 != "") {
          that.checkFlie({md5:md5})
          file.status='done'
        }
      };
      fileReader.onerror = function() {
        this.$message.warning('异步文件出错');
        return false;
      };
    },
    handleChange(info) {
      console.log(info)
      const status = info.file.status;
      this.computeMD5(info.file)
      if (status !== 'uploading') {
        console.log(info.file, info.fileList);
      }
      if (status === 'done') {
        this.$message.success(`${info.file.name} file uploaded successfully.`);
      } else if (status === 'error') {
        this.$message.error(`${info.file.name} file upload failed.`);
      }
    },
  },
};
</script>